<template>
  <el-dialog :append-to-body="true"
             title="上传文件"
             :close-on-click-modal="false"
             @close="closeHandle"
             :visible.sync="visible">
    <el-upload
      v-loading="loading"
      element-loading-text="上传中..."
      drag
      :action="url"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      :on-progress="handleProgress"
      multiple
      :file-list="fileList"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只支持jpg、png、gif格式的图片！</div>
    </el-upload>
    <br>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      percentage: 0,
      loading: false,
      visible: false,
      url: this.$http.adornUrl(`/widge/widge/uploadFileToDir?token=${this.$cookie.get('token')}`),
      num: 0,
      successNum: 0,
      fileList: [],
      filePath: '',
      images: '',
    }
  },
  methods: {
    init () {
      this.images = []
      this.fileList = []
      this.visible = true
    },
    // 上传之前
    beforeUploadHandle (file) {
      this.loading = true
      //获取file文件夹下的所有文件
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        this.$message.error('只支持jpg、png、gif格式的图片！')
        return false
      }
      this.num++
    },
    handleProgress(event,file,fileList){
      setTimeout(this.handleProgressNum(event),2000);
    },
    handleProgressNum(event){
      setInterval(this.percentage = parseInt((event.loaded / event.total * 100).toFixed(0)),2000)
    },
    // 上传成功
    successHandle (response, file, fileList) {
      this.fileList = fileList
      this.successNum++
      this.loading = false
      if (response && response.code === 0) {
        this.filePath = response.filePath
        if (this.fileList.length === this.successNum){
          this.$message({
            message: "上传成功！",
            type: 'success',
            duration: 1000,
          })
          this.fileList.forEach((item, index) => {
            let imageUrl = item.response.filePath
            this.images.push(imageUrl)
          })
          this.$emit('refreshDataList',this.images)
        }
      } else {
        this.$message.error(response.msg)
      }
    },
    // 弹窗关闭时
    closeHandle () {
      this.images = []
      this.fileList = []
      this.$emit('refreshDataList',this.images)
    }
  }
}
</script>
